<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：商品详情页面
 *		作   者：Frank
 *		创建日期：2023/07/25
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/07/25			创建文件
 *************************************************************************/	
 -->
<template>
	<view  class="main">
		<ExchangeDialog v-if="isShowDlg" :data="dlgData"></ExchangeDialog>
		<view class="top">
			<image class="top-img" :src="commodity.main_img" mode=""></image>
		</view>
		<view class="mid">
			<view class="mid-crystal">
				<view class="mid-crystal-left">
					<text class="mid-crystal-left-name">水晶</text>
					<text class="mid-crystal-left-num">{{commodity.crystal}}</text>
				</view>
				<view class="mid-crystal-right">已有{{commodity.join_num}}人参与</view>
			</view>
			<view class="mid-name">{{commodity.name}}</view>
			<view class="mid-btn">免运费</view>
		</view>
		<view class="mid-sure">物品保证: 全新正品, 七天无理由退货</view>
		<view class="foot">
			<view class="foot-text">--商品展示--</view>
			<image v-for="(item,index) in commodity.sub_img" 
				:key="index"
				:src="item"
				class="foot-img">
			</image>
			<view class="foot-desc">
				<view class="foot-desc-bold">【限购说明】</view>
				<view class="">
					为更好地保证更多的用户得到福利，避免囤积商品，每样商品，同一用户仅可兑换一件；同一用户指ID，名字，收货
					地址，手机号码等任一信息一致。
				</view>
				<view class="foot-desc-bold">【退货须知】</view>
				<view class="">如是数码此类特殊产品，机器激活、拆除塑膜包装等非质量问题导致的问题，本平台不承担无条件退货。商品出现外观问题，如无法提供开箱视频，本平台不提供无条件退货服务。其他原因可以接受退货，并且退还金币。
				</view>
				<view class="foot-desc-bold">【购物须知】</view>
				<view class="">
					<text class="foot-desc-bold">关于色差:</text>因手机、平板等显示设备的色彩偏差和个人对颜色理解不同，导致理解等不同，导致实物可能会与照片存在一定色差，请您以收到实物为主。<br>
					<text class="foot-desc-bold">关于气味:</text>某些类型新商品可能存在一些气味，这些气味都来自材料，您可以将商品放置在通风处一段时间，减少气味再使用。<br>
					<text class="foot-desc-bold">关于尺码:</text>商品详情页的尺码表/尺寸信息仅供参考，根据商品材质特性和测量方法上的差异，可能存在细微误差，均属于正常情况。
				</view>
			</view>
		</view>
		<view class="exchange-btn" @tap="onExchange">兑换</view>
	</view>
</template>

<script>
	import { mapStores, mapActions, mapState } from 'pinia'
	import { commodityStore } from '@/store/modules/commodityStore.js'
	import Bar from '../../components/common/Bar.vue'
	import ExchangeDialog from '../../components/common/ExchangeDialog.vue'
	export default {
		components:{
			Bar,
			ExchangeDialog
		},
		
		data() {
			return {
				cateId:0,
				commodityIdx:0,
				commodity:{},
				// 对话框
				isShowDlg:false,
				dlgData:{
					title:'',
					text:'',
					cbTap:()=>{}
				}
			}
		},
		computed:{
			...mapStores(commodityStore)
		},
		methods: {
			onExchange(){
				this.dlgData.title = '温馨提示';
				this.dlgData.text = this.commodity.name;
				this.dlgData.btnText = `${this.commodity.crystal}兑换`;
				this.dlgData.img = this.commodity.main_img;
				this.dlgData.cbTap = () => {
					this.isShowDlg = false;
					
					let url = '../../pages/exchange-confirm/exchange-confirm?cateId='+this.cateId+'&commodityIdx=' + this.commodityIdx;
					uni.navigateTo({
						url
						});	
				}
				this.dlgData.cbClose = () => {
					this.isShowDlg = false;
				}
				
				this.isShowDlg = true;					
			}
		},
		onLoad(e) {
			this.cateId = e.cateId;
			this.commodityIdx = e.commodityIdx;
			this.commodity = this.commodityStore.commodity[e.cateId][e.commodityIdx];
		}
	}
</script>

<style scoped>
	.main{
		width: 100vw;
		background-color: #F6F6F6;
		padding: 52rpx 0 105rpx 0;
		color: #F6F6F6;
	}
	.top{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
	}
	.top-img{
		width: 600rpx;
		height: 700rpx;
		padding: 50rpx 0;
	}
	.mid{
		width: 100%;
		margin: 10rpx 0;
		background-color: white;
		padding: 24rpx 16rpx;
	}
	.mid-crystal{
		display: flex;
		justify-content: space-between;
		padding: 16rpx 0;
	}
	.mid-crystal-left{
	}
	.mid-crystal-left-name{
		color:#E95856;
		font-size: 32rpx;
	}
	.mid-crystal-left-num{
		padding-left: 10rpx;
		color:#E65555;
		font-size: 46rpx;
		font-weight: bold;
	}
	.mid-crystal-right{
		font-size: 28rpx;
		color: #C7C7C7;
	}
	.mid-name{
		color:black;
		font-size: 38rpx;
		font-weight: bold;
		padding: 16rpx 0;
		line-height: 52rpx;
	}
	.mid-btn{
		width: 100rpx;
		height: 45rpx;
		background-color: #E75654;
		border-radius: 20rpx;
		color:white;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mid-sure{
		text-align: center;
		margin: 8rpx 0;
		padding: 16rpx 0;
		font-size: 32rpx;
		color:#727272;
		background-color: white;
	}
	.foot{
		width: 100%;
	}
	.foot-text{
		text-align: center;
		padding: 8rpx 2rpx;
		font-size: 28rpx;
	}
	.foot-img{
		width: 100%;
		height: 750rpx;
	}
	.foot-desc{
		width: 100%;
		padding: 5rpx 16rpx;
		color: black;
		font-size: 24rpx;
	}
	.foot-desc-bold{
		font-weight: bold;
		padding: 16rpx 0;
	}
	.exchange-btn{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ABA6FB;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
